<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>第41届国际名家具(东莞)展览会 邀请函</title>
	<link rel="stylesheet" href="animate.min.css">
	<link rel="stylesheet" href="https://lib.baomitu.com/fullPage.js/3.0.3/fullpage.min.css">
	<link rel="stylesheet" href="style.css">
	<script src="https://lib.baomitu.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="js/easings.min.js"></script>
	<script src="js/scrolloverflow.js"></script>
	<script src="js/fullpage.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript">
	  if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
	      (function (win){
	        var doc = win.document;
	        var html = doc.documentElement;
	        // defaut 1080px
	        var baseWidth = 640; //设计稿的尺寸
	        var grids = baseWidth/100,
	          resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
	          recalc = function() {
	            var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-width
	            html.style.fontSize = clientWidth / grids + 'px';
	          };
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	        recalc();
	      })(window);
	  } else {
	    var doc = window.document;
	    var html = doc.documentElement;
	    clientWidth = html.clientWidth= "414px";
	    html.style.fontSize = "64.6875px";
	    html.clientHeight = "660px";
	    $(function(){
	        
	        $(".page-wrap").css({"width":"414px","height":"655px"});
	        
	    })
	    
	      
	  }
	</script>
</head>
<body>
    <div class="page-wrap">
    <div class="music-play">
    <img width="30" src="images/music.svg" >
	    <audio style="display: none;height: 0px;" id="mp3Btn" autoplay loop>
			<source src="a1.mp3" type="audio/mpeg" />
		</audio>
    </div>
	<div id="fullpage">
	    
		<div class="section section-1 active">
			<div class="img img11 animated"><img data-src="images/1.png"></div>
			<div class="img img12 animated"><img data-src="images/2.png"></div>
			<div class="img img13 animated"><img data-src="images/3.png"></div>
			<div class="img img14 animated"><img data-src="images/4.png"></div>
			
		</div>
		<div class="section section-2">
			<div class="img img21"><img data-src="images/21.png"></div>
			<div class="img img22"><img data-src="images/1.png"></div>
			<div class="txt21">2019设计展再度联手顶尖设计大咖于Design GO展区呈现至TOP设计作品，<br>
			解码全球设计趋势；<br>
			明日之星展区集结新锐设计师，将吸纳更多有趣原创品牌；<br>
			充满各种奇思妙想的概念展、<br>
			2019金羿奖、高端论坛活动。。。。
			</div>
			<div style="text-align:center" class="txt22">
			<p>第41届国际名家具（东莞）展览会继续</p>
			<p>《花样百出》</p>
			</div>
		</div>
		<div class="section section-3">
			<div class="bg img31 animated "><img data-src="images/31.png"></div>
			<div class="txt31">75万㎡、1205家参展企业，超100场各类专业活动、论坛，接待国内外专业观众75136人，“大家居融合”盛会成为行业焦点。</div>
			<div class="img41">
			    <img data-src="images/p4.jpg">
			    <p>戛迪高峰论坛</p>
			</div>
			<div class="txt32">MINI花园、无边居所两大创新展览模式；集多种定制业态的8号馆全屋定制馆，引导定制新方向，受业界广泛关注并得到赞誉。</div>
		</div>
		<div class="section section-4">
			<div class="bg animated"><img data-src="images/bg2.png"></div>
			<div class="txt4"><p>戛迪高峰论坛、中国家装峰会等设计论坛，家具品牌与设计师思想碰撞，探讨设计创新，强化设计与家居产业融合。</p></div>
			<div class="img41">
			<img data-src="images/p4.jpg">
			<p>戛迪高峰论坛</p>
			</div>
			<div class="img42">
			<img data-src="images/p42.jpg">
			<p>中国家装峰会等设计论坛</p>
			</div>
		</div>
		<div class="section section-5">
			<div class="bg animated"><img data-src="images/bg51.png"></div>
			<div class="img img52"><img src="images/img52.jpg" alt="展会优势"></div>
			<div class="txt txt51">
			    <p><strong>优势1：</strong>行业引领性平台，构筑新时代家居产业核心生态圈</p>
			</div>
			<div class="txt txt52">
			    <p><strong>优势2：</strong>产地办展，展贸一体化独特优势</p>
			</div>
			<div class="txt txt53">
			    <p><strong>优势3：</strong>二十年成功办展积累的资源和行业经验优势</p>
			</div>
			<div class="txt txt54">
			    <p><strong>优势4：</strong>展贸方式、展品、服务模式创新、展会价值凸显</p>
			</div>
			
		</div>
		<div class="section section-6">
			<div class="bg animated"><img data-src="images/bg61.png"></div>
			<div class="img img61"><img src="images/ewm.jpg"><p>扫一扫关注我们获取最新资讯</p></div>
			<div class="img img62"><img src="images/img62.png"><p>展馆全貌</p></div>
			<div class="btn-box"><a target="_blank" href="https://jinshuju.net/f/qVu9qJ">参展报名</a></div>
		</div>
		

	</div>
		<!-- 显示页码数 -->
		<div class="page-tips">
			<em><span id="page-num"></span>/6</em>
		</div>
	</div>
	<div class="page-ewm"><img src="images/ewm.jpg">
        <p>手机上浏览</p>
    </div>
	<script>
	$.fn.extend({
	    animateCss: function(animationName) {
	        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
	        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
	            $(this).removeClass('animated ' + animationName);
	        });
	    }
	});

	$(function(){
		$("#fullpage").fullpage({
			autoScrolling:true,
			scrollHorizontally: true,
			css3: true,
			v2compatible: true,
			verticalCentered: false,
			continuousVertical: true,
			
			afterRender: function(){
				
			},
			onLeave: function(index, nextIndex, direction){
					var leavingSection = this;
					$(".bg").removeClass("zoomIn").fadeOut();
					console.log(index);
					
			},
			afterLoad: function(anchorLink, index){
				$(".bg").addClass("zoomIn").fadeIn();
				$("#page-num").text(index);
			    if(index==1){
			    	$(".img11, .img12").animateCss("fadeInLeft");
			    	$(".img13").animateCss("zoomIn");
			    	$(".img14").animateCss("slideInLeft");
			    }
			    if(index==2){
			    	$(".img22").animateCss("zoomIn");
			    	$(".txt21, .txt22").animateCss("fadeInLeft");
			    	$(".img21").animateCss("zoomIn");
			    }
			    if(index==3){
			    	$(".txt31, .txt32").animateCss("fadeInLeft");
			    	
			    }
			    if(index==4){
			    	$(".txt4, .img41, .img42").animateCss("fadeInLeft");
			    	
			    }
			    if(index==5){
			    	$(".img52").animateCss("fadeInLeft");
			    	$(".txt51,.txt52, .txt53, .txt54").animateCss("fadeInUp");
			    
			    }
			    if(index==6){
			    	$(".img61,.img62").animateCss("fadeInLeft");
			    	$(".btn-box").animateCss("fadeInLeft");
			    	setTimeout(function() {
			    	    $(".btn-box").animateCss("swing");
			    	}, 1800);

			    }
			}

		});

		var audio = document.getElementById('mp3Btn');
		$('.music-play').click(function(event){
			//防止冒泡
			event.stopPropagation();
			if(audio.paused) //如果当前是暂停状态
			{
			$('.music-play').css({"animation-play-state":"running"});
			audio.play();//播放
			return;
			}
			$('.music-play').css({"animation-play-state":"paused"});
			audio.pause(); //暂停
		});

	})
	if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
	    $(".page-ewm").remove();
	}
		
	</script>
	<script src="js/wx_share.js"></script>
</body>
</html>